<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<include file="Public:meta" />
</head>
<body id="main_page">
<div class="container">
    <form enctype="multipart/form-data" method="post" id="frm">
      <div class="table">
       <div class="toolbars">
            <li class="toolbar"><a id="selectall" onclick="CheckAll()"  title="全选">全选</a></li>
            <li class="toolbar"><a id="del" onclick="del()" title="批量删除">删除</a></li>
            <li class="toolbar"><a id="sortall" onclick="refresh()" title="刷新">刷新</a></li>
            <li class="toolbar toolbarform">
                <label>文件名前缀</label><input type="text" class='textinput' name="Prefix" placeholder="请输入文件前缀搜索" style="width:260px" value="{$Prefix}" id="Prefix"/>
                <input id="btnSeek" class="btnToolbarForm" type="submit" value="查询" onclick="search()">
            </li>
        </div>
        <table class="datatable" id="datatable">
            <tr>
            	<th width="35px"  nowrap="nowrap">选中</th>
                <th>文件名</th>
                <th width="120px" >文件类型</th>
                <th width="100px" >文件大小</th>
                <th width="130px" >时间</th>
                <th style="width:225px">操作</th>
            </tr>
            <notempty name="Data">
                <volist name="Data" id="d">
                    <tr class="row{$i}" key="{$d.key}">
                        <td><input class="checkrow" type="checkbox" index="{$i}" class="keybox" name="Key[]" value="{$d.key}" /></td>
                        <td style="text-align:left">
                            <img src="{$d.ico}" width="16" height="16" align="absmiddle">
                            <span class="preview" alt="{$d.fileurl}">{$d.key}</span>
                        </td>
                        <td>{$d.filetype}</td>
                        <td>{$d.fsize}</td>
                        <td>{$d.putTime}</td>
                        <td class="operator">
                              <a style="float:left" href="{$d.fileurl}" target="_blank" id="btnEdit" name="btnEdit">查看</a>
                              <div class="btn-sep"></div>
                              <a style="float:left" onclick="rename({$i})" id="btnRepair">重命名</a>
                              <div class="btn-sep"></div>
                              <a style="float:left"  data-clipboard-text="{$d.fileurl}" onclick="copyUrl({$i})" id="btnCheckDb">复制链接</a>
                        </td>
                    </tr>
                </volist>
                <notempty name="Marker">
                	<tr><td colspan="6" style="padding:8px 0;"><a href="{$Url}qiniuFile/Marker/{$Marker}" class="next">下一页</a></td></tr>
                </notempty>
            <else/>
                <tr><td colspan="6" style="color:red;font-weight:bold;text-align:left;padding-left:10px">没有文件!</td></tr>
            </notempty>                               
        </table>
        <div class="tfoot">
                <div class="page">
                    <span class="pagesize">每页<span class="pz">{$PageSize}</span>个文件</span>&nbsp;
                    <a class="pagefirst" href="{$Url}qiniuFile">首页</a>&nbsp;&nbsp;
                    <notempty name="NextMarker">
                    	<a class="pagedown" href="{$Url}qiniuFile/Marker/{$NextMarker}">下一页</a> 
                    </notempty>
                </div>
        </div>
    </div>
    </form>
</div>
</body>
</html>
<div class="dialog" id="dlgRename" title="文件重命名">
    <table class="dlgtable" style="width:420px">
            <tr>
                <th nowrap="nowrap" style="width:50px;">文件名</th>
                <td style="width:auto;"><input type="text" class="textinput" style="width:100%;padding:5px 3px;" id="NewFileName" value="" /></td>
            </tr>
            <tr>
                <th nowrap="nowrap" style="width:50px;"></th>
                <td style="color:red;width:auto;">
                	<b>说明：</b>云存储不支持目录，但可在文件名称中使用<span style="color:#03F">路径前缀</span>来分类文件，实现类似的目录效果！
                    <div style="color:blue;">例如： image/jpg/your-file-name.jpg</div>
                </td>
            </tr>
    </table>
</div>
<script type="text/javascript" src="{$WebPublic}jquery/clipboard.min.js"></script>
<script type="text/javascript">
//查询
function search(){
	$('#frm').attr("action", "{$Url}qiniuFile");
	$('#frm').submit();
	return true;
}

function refresh(){
	location.href = "{$Url}qiniuFile";
}

function del(){
	var arrChk = $("input[name='Key[]']:checked"); 
	if( arrChk.length == 0 ) {
		WarnBox("{$Think.lang.CheckDeleteTip}");
		return;
	}
	
	$.confirm("{$Think.lang.DeleteTip}", function () {
		LoadBox();
		$('#frm').attr("action", "__URL__/qiniuDelFile");
		$("#frm").ajaxSubmit({
			success: function(data){
				CloseLoadBox();
				if(data.status == 1){
					//删除指定的行
					arrChk.each(function(){
						var id = $(this).attr("index");
						$(".row"+id).remove(); 
					});
					SucceedBox(data.info);
				}else{
					ErrorBox(data.info);
					return false;
				}
			},
			dataType: 'json'
		});
	}, function () {
		return true;
	});
}

//文件重命名
function rename(id){
	var oldFileName = $(".row"+id).attr("key");
	$("#NewFileName").val(oldFileName);
	var d = $.dialog({
		title: $("#dlgRename").attr("title"),
		id: $("#dlgRename").attr("id"),
		lock: true,
		padding: 8,
		content: document.getElementById('dlgRename'),
		ok: function () {
			var newFileName = $("#NewFileName").val();
			if(!newFileName){
				ErrorBox("文件名不能为空！");
				return false;
			}
			if(oldFileName==newFileName){
				return true;
			}
			var url = "{$Url}qiniuRename";
			var params = {
					OldFileName:oldFileName,
					NewFileName:newFileName
			}
			LoadBox();
			$.post(url, params, function(data){
				CloseLoadBox();
				if (data.status==1){
					//同步更新界面属性
					var newName = data.data['NewFileName'];
					var newUrl = data.data['FileUrl'];
					$(".row"+id).attr("key", newName);
					$(".row"+id).attr("data-clipboard-text", newUrl);
					
					$(".row"+id+" .keybox").val(newName);
					$(".row"+id+" .preview").attr("alt", newUrl);
					$(".row"+id+" .preview").text(newName);
					
					$(".row"+id+" #btnEdit").attr("href", newUrl);
					SucceedBox(data.info);
					d.close();
				}else{
					ErrorBox(data.info);
				}
			},"json");
			return false;
		},
		okValue: '保存',
		cancelValue: '取消',
		cancel: function () {
			
		}
	});	
}

//复制链接
function copyUrl(id){
	var b = Clipboard.isSupported();
	if(b){
		var clipboard = new Clipboard('.row'+id+' #btnCheckDb');
		clipboard.on('success', function(e) {
			SucceedBox("复制成功");
		});
		
		clipboard.on('error', function(e) {
			ErrorBox("复制失败");
		});
	}else{
		ErrorBox("您的浏览器不支持复制");
	}
}

$(document).ready(function(){
	$(".preview").powerFloat({
		targetMode: "ajax",
		targetAttr: "alt"
	});
});
</script>